<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div01">
			<div id="div02">测试1</div>
			<div id="div03">测试2</div>
			<div id="div04">测试3</div>
		</div>
		<ul id="ul01">
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>葡萄</li>
		</ul>
		
		<div>
			节点名字：<input type="text" id="textNodeName"/><br />
			节点类型：<input type="text" id="textNodeType"/><br />
			节点值：<input type="text" id="textNodeValue"/><br />
			子节点数量：<input type="text" id="textNodeQty"/><br />
		</div>
		
		<button onclick="foo(1)">回到根节点</button>
		<button onclick="foo(2)">得到当前元素的第一个子元素</button>
		<button onclick="foo(3)">得到当前元素的最后一个子元素</button><br />
		<button onclick="foo(4)">得到当前元素的前一个兄弟元素</button>
		<button onclick="foo(5)">得到当前元素的后一个兄弟元素</button>
		<button onclick="foo(6)">得到当前元素的父亲元素</button>
		<script>
			// 保存当前显示的节点
			var cur = document.documentElement;
			function foo(op){
				
				switch (op){
					case 1:
						cur = document.documentElement;
						break;
					case 2:
						cur = cur.firstChild;
						break;
					case 3:
						cur = cur.lastChild;
						break;
					case 4:
						cur = cur.previousElementSibling;
						break;
					case 5:
						cur = cur.nextElementSibling;
						break;
					case 6:
						cur = cur.parentNode;
						break;
					default:
						break;
				}
				
				textNodeName.value = cur.nodeName;
				textNodeType.value = cur.nodeType;
				textNodeValue.value = cur.nodeValue;
				textNodeQty.value = cur.childNodes.length;
				
			}
			
		</script>
	
	
	
	</body>
</html>
